import React, {PropTypes} from 'react';
import {connect} from 'dva';
import {Row, Col, Card} from 'antd';
import NumberCard from '../components/Dashboard/numberCard';
import Quote from '../components/Dashboard/quote';
import Sales from '../components/Dashboard/sales';
import RecentSales from '../components/Dashboard/recentSales';
import Comments from '../components/Dashboard/comments';
import Completed from '../components/Dashboard/completed';
import Browser from '../components/Dashboard/browser';
import Cpu from '../components/Dashboard/cpu';
import User from '../components/Dashboard/user';
import styles from './dashboard.less';
import {color} from '../utils';

const bodyStyle = {
  bodyStyle: {
    height: 432, 
    background: '#fff'
  }
}

function Dashboard ({dashboard, dispatch}) {
  const {weather, sales, quote, numbers, recentSales, comments, completed, browser, cpu, user} = dashboard
  const numberCards = numbers.map((item, key) => <Col key={key} lg={6} md={12}>
    <NumberCard {...item} />
  </Col>)

  return (
    <Row gutter={24}>
      {numberCards}
      <Col lg={18} md={24}>
        <Card bordered={false} bodyStyle={{
          padding: '24px 36px 24px 0'
        }}>
          <Sales data={sales} />
        </Card>
      </Col>

    </Row>
  )
}

Dashboard.propTypes = {
  weather: PropTypes.object,
  sales: PropTypes.array,
  quote: PropTypes.object,
  numbers: PropTypes.array,
  recentSales: PropTypes.array,
  comments: PropTypes.array,
  completed: PropTypes.array,
  browser: PropTypes.array,
  cpu: PropTypes.object,
  user: PropTypes.object
}

export default connect(({dashboard}) => ({dashboard}))(Dashboard)
